<template>
  <div class="bg-white">
    <div class="flex items-center justify-center py-6  border-b border-gray-200">
      <span class="text-gray-500">试卷库</span>
    </div>
     <div class="flex items-center justify-between px-6 py-4 bg-white relative"> 
      <div class="flex-1">
        <el-button type="primary" round :icon="Plus" @click="toCreateExam"> 新建考试</el-button>
        <el-button round @click="handleCreateDir">新建文件夹</el-button>
      </div>
      <div class="flex-1 flex items-center justify-end gap-4 right-div">
        <div class="flex items-center gap-4" >
          <span class="text-blue-900/75 whitespace-nowrap text-sm" @click="securityDialogVisible=true">
            <font-awesome-icon :icon="['fas', 'shield']"  />
            安全设置
          </span>
              <el-dropdown trigger="hover">
            <!-- <el-button  link>导出全部</el-button> -->
                 <span class="text-blue-900/75 whitespace-nowrap text-sm">
                   <font-awesome-icon :icon="['fas', 'arrow-up-from-bracket']"  />
                 导出全部试卷
                </span  >
                <template template #dropdown>
                  <el-dropdown-menu class="import-dropdown">
                    <el-dropdown-item @click="exportTemplate('word')">word标准格式</el-dropdown-item>
                        <el-dropdown-item @click="exportTemplate('wordTypography')">word排版格式</el-dropdown-item>
                        <el-dropdown-item @click="exportTemplate('excel')">Excel格式</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
          </el-dropdown>
        </div>
        <el-input v-model="keyword" placeholder="试卷名" style="width: 200px">
        </el-input>
        <el-icon  class="z-10 text-gray-400 absolute right-[30px] top-[25px] text-xl">  <Search /></el-icon>
      </div>
    </div>

      <!-- 表格上方的面包屑 -->
    <div class="px-6  text-gray-400 flex justify-between text-sm mt-4">
       <div class="ml-4 flex items-center text-gray-600">
          <span v-if="currentFolder" class="cursor-pointer text-gray-400 flex items-center" @click="goBack">
            <el-icon><Back /></el-icon>返回
          </span>
          <span class="mx-2 text-gray-400" v-show="currentFolder?.title">/</span>
          <span class="text-gray-400">{{ currentFolder ? currentFolder.title : '全部试卷' }}</span>
        </div>
        <span>共{{ currentFolder ? currentFolder.subCount : total }}份</span>
    </div>
    <!-- 表格 -->
    <div class="px-6 py-4 bg-white">
      <el-table 
        :data="filteredItems" 
        stripe 
        style="width: 100%" 
        @cell-mouse-enter="handleCellMouseEnter"  >
        <el-table-column type="selection" width="55" :selectable="selectable"/>
        <el-table-column label="文件夹/试卷"   width="300">
          <template #default="scope">
            <div @click="handleRowClick(scope.row)">
              <div v-if="scope.row.type=='folder'" class="flex items-center  justify-between  hover:cursor-pointer">
                <div  class="flex items-center space-x-2">
                  <font-awesome-icon :icon="['fas', 'folder']" class="mr-3 text-blue-400 text-xl"/>
                 <div class="flex flex-col px-1" >
                  <div v-if="scope.row.isEditing" class="flex items-center space-x-2">
                    <el-input 
                    v-model="scope.row.title" 
                    placeholder="输入文件夹名称"
                    @keyup.enter="confirmFolder(scope.row,$event)"></el-input>
                    <el-button type="success" link @click="confirmFolder(scope.row,$event)">
                      <FontAwesomeIcon icon="check" size="sm"></FontAwesomeIcon>
                    </el-button>
                    <el-button type="danger" link  @click="cancelFolder(scope.row,$event)"> 
                      <FontAwesomeIcon icon="xmark" size="sm"></FontAwesomeIcon>
                    </el-button>
                   </div>
                  <span class="font-medium  whitespace-nowrap " v-if="!scope.row.isEditing">{{ scope.row.title }}</span>
                  </div>
               </div>
              </div>
              <div v-else>
                <div class="flex items-center justify-between w-full  hover:cursor-pointer" >
                  <div v-if="scope.row.isEditing" class="flex items-center space-x-2">
                    <el-input 
                    v-model="scope.row.title" 
                    placeholder="输入文件夹名称"
                    @keyup.enter="confirmFolder(scope.row,$event)"></el-input>
                    <el-button type="success" link @click="confirmFolder(scope.row,$event)">
                      <FontAwesomeIcon icon="check" size="sm"></FontAwesomeIcon>
                    </el-button>
                    <el-button type="danger" link  @click="cancelFolder(scope.row,$event)"> 
                      <FontAwesomeIcon icon="xmark" size="sm"></FontAwesomeIcon>
                    </el-button>
                   </div>
                  <span class="font-medium  whitespace-nowrap " v-if="!scope.row.isEditing"> {{ scope.row.title }} </span>
                </div>
              </div>
              </div>
          </template>
        </el-table-column>
        <el-table-column label="题量" >
          <template #default="scope">
            <div v-if="!scope.row.questionCount" >---</div>
            <div v-else>{{ scope.row.questionCount }}</div>
          </template>
        </el-table-column>
        <el-table-column label="总分" >
            <template #default="scope">
            <div v-if="!scope.row.totalScore" >---</div>
            <div v-else>{{ scope.row.totalScore }}</div>
          </template>
        </el-table-column>
        <el-table-column label="难度"  >
          <template #default="scope">
            <div v-if="!scope.row.difficulty" >---</div>
            <div v-else>{{ scope.row.difficulty }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建者" prop="creator" ></el-table-column>
        <el-table-column label="发放次数" >
          <template #default="scope">
            <div v-if="!scope.row.issueNumber" >---</div>
            <div v-else>{{ scope.row.issueNumber }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"  sortable/>
        <el-table-column label="" width="300"> 
          <template #default="scope">
            <div v-if="scope.row.type=='folder'" class="flex items-center  justify-between">
               <!-- 相关编辑的选项 -->
                <div v-show="isShowOption == scope.row.id && !scope.row.isEditing" class="flex items-center space-x-2">
                  <el-button type="primary" link @click="handleReName(scope.row,$event)">重命名</el-button>
                  <el-button type="primary" link @click=" moveDialogVisible = true">移动到</el-button>
                  <el-button type="primary" link @click="handleDelete(scope.row)">删除</el-button>
                </div>
            </div>
              <div v-else>
                <div class="flex items-center justify-between w-full" >
                  <!-- 相关编辑的选项 -->
                  <div v-show="isShowOption == scope.row.id" class="flex items-center space-x-2" >
                    <el-button type="primary" round  size="small" @click="publishSettings(scope.row)">发布</el-button>
                    <el-button type="primary" link @click="handleArchive(scope.row,$event)">封存</el-button>
                    <!-- <div  @click.stop >  -->
                      <el-dropdown trigger="click" >
                      <el-button  type="primary" link>更多</el-button>
                      <template #dropdown>
                        <el-dropdown-menu class="import-dropdown">
                          <el-dropdown-item   v-for="item in moreOptions"  @click="handleMoreOption(item.command,scope.row,scope.$index,$event)">{{ item.label }}</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                    <!-- </div> -->
                    
                  </div>
                </div>
              </div>
               
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 --> 
      <div class="flex justify-center px-6 py-4">
        <!-- hide-on-single-page -->
        <el-pagination  
          v-model:current-page="currentPage"  
          v-model:page-size="pageSize" 
          :total="total" 
          :page-sizes="[30, 50, 100]" 
          layout="prev, pager, next" />
      </div>
    </div>
    <!-- 安全设置 dialog框 -->
  <el-dialog v-model="securityDialogVisible" title="安全设置"  width="25%" class="rounded-lg">  
      <template #header="{ close, titleId, titleClass }">
          <div class="my-header border-b pb-4">
            <span :id="titleId" :class="titleClass">
              安全设置
            </span>
          </div>  
        </template>
        <div class="px-6 py-4 space-y-2">
           <div class="flex items-center space-x-2">
            <span>加密"考试、题库"</span> 
            <el-switch v-model="isEncrypt" />
           </div>
           <span class="text-xs text-gray-400">开启后，教师团队进入 考试、题库模块，需要进行密码验证。若课程允许学生自测，加密后学生将无法使用自测功能</span>
        </div>
          
      <template #footer>
          <div class="py-4 px-6 border-t flex items-center justify-end">
            <div class="flex gap-4">
              <el-button @click="securityDialogVisible=false" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="handleSecuritySetting" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
     </el-dialog> 
    <!-- 导出word格式 dialog框 -->
  <el-dialog v-model="exportWordDialogVisible" title="删除"  width="25%" class="rounded-lg">  
         <template #header="{ close, titleId, titleClass }">
          <div class="my-header border-b pb-4">
            <span :id="titleId" :class="titleClass">
              导出内容
            </span>
          </div>
        </template>
          <el-checkbox-group v-model="exportOptions" class="flex flex-col gap-4 pl-6" >
                <el-checkbox label="包含答案" value="answer"></el-checkbox>
                <el-checkbox label="包含解析" value="analysis"></el-checkbox>
                </el-checkbox-group>
      <template #footer>
          <div class="py-4 px-6 border-t flex items-center justify-end">
            <div class="flex gap-4">
              <el-button @click="exportWordDialogVisible=false" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="exportWordPaper" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
     </el-dialog> 
     <!-- 封存的弹窗 -->
  <el-dialog v-model="isArchiveDialogVisible" title="删除"  width="25%" class="rounded-lg">  
         <template #header="{ close, titleId, titleClass }">
          <div class="my-header border-b pb-4">
            <span :id="titleId" :class="titleClass">
              试卷封存
            </span>
          </div>
        </template>
        <div class="text-center">
          <span  class="text-gray-400">封存后任何人员或者业务模块将不能直接访问此试卷，如需查看修改题目需要输入封存密码</span>
          <el-form  ref="archiveFormRef" :model="archiveForm" label-width="80px" class="w-[90%]  px-10 pt-6" :rules="rules">
            <el-form-item label="设置密码" prop="archivePwd">
              <el-input v-model="archiveForm.archivePwd" placeholder="6位数字和字母组合" />
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPwd">
              <el-input v-model="archiveForm.checkPwd" placeholder="6位数字和字母组合" />
            </el-form-item>
          </el-form>
        </div>

      <template #footer>
          <div class="py-4 px-6 border-t flex items-center justify-end">
            <div class="flex gap-4">
              <el-button @click="isArchiveDialogVisible=false" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="confirmArchive*(archiveFormRef)" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
     </el-dialog> 
     <!-- 锁定题目的dialog -->
    <el-dialog v-model="lockDialogVisible" title="锁定题目" width="500px"  class="rounded-lg"> 
       <template #header="{ close, titleId, titleClass }">
          <div class="my-header border-b pb-4">
            <span :id="titleId" :class="titleClass">
              试卷封存
            </span>
          </div>
        </template>
        <div class="p-4 ">
          锁定后，题目将被移至题库的“已锁定题目”文件夹，且不会出现在后续的题库选题和随机组卷中。如需解锁，可前往题库“已锁定题目”文件夹操作。确认锁定？
        </div>
         <template #footer>
          <div class="py-4 px-6 border-t flex items-center justify-end">
            <div class="flex gap-4">
              <el-button @click="lockDialogVisible=false" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="lockDialogVisible=true" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
    </el-dialog>  
    <!-- 移动到的dialog -->
    <el-dialog v-model="moveDialogVisible"  width="30%" class="rounded-lg"> 
         <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <h4 :id="titleId" :class="titleClass">
              移动到
              <span class="text-sm text-gray-400">(选择目标目录)</span>
            </h4>
            
          </div>
        </template>
      <!-- 目录列表 -->
      <div class="min-h-[300px] max-h-[400px] overflow-y-auto p-4 text-xl">
      <el-tree
          ref="treeRef"
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="[1]"
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <div class="flex items-center">
              <el-icon class="mr-2 text-blue-400">
                <Folder />
              </el-icon>
              <span v-if="!data.isEditing">{{ node.label }}</span>
              <div class="flex items-center" v-if="data.isEditing">
               <el-input  v-model="data.editingName" class="ml-2 w-[100px]" size="small" />
               <el-button  class="w-4 h-4 p-2 mx-4" @click="createNodeFolder(data)">
                <FontAwesomeIcon icon="fa-solid fa-check"  class=" cursor-pointer text-blue-500"/>
               </el-button>
               <el-button  class="w-4 h-4 p-2 mx-4" @click="cancelNodeFolder(data)">
                <FontAwesomeIcon icon="fa-solid fa-xmark" class="cursor-pointer text-blue-500"/>
              </el-button>
              </div>
              <el-icon v-if="selectedNode === data.id && !data.isEditing" class="ml-2 text-blue-500" >
                <!-- <Select /> -->
                <Star />
              </el-icon>
            </div>
          </template>
        </el-tree>
         </div>
      <!-- 底部操作按钮 -->
        <template #footer>
          <div class="px-6 py-4 border-t flex items-center justify-between">
            <el-button
              type="primary"
              link
              class="flex items-center"
              @click="addNodeFolder"
            >
              <el-icon class="mr-1">
                <Plus />
              </el-icon>
              新建文件夹
            </el-button>
            <div class="flex gap-4">
              <el-button @click="moveDialogVisible=false" round class="w-20">取消</el-button>
              <el-button type="primary" @click="confirmMoveDialog" round class="w-20">确定</el-button>
            </div>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import  { getPaperList } from "@/api/exam.js"
import { useTabsStore } from '@/store/tabs'
import { Plus } from '@element-plus/icons-vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {useEditPaperStore} from "@/store/editPaper"

const router = useRouter()
const tabsStore = useTabsStore()
const editPaperStore = useEditPaperStore()

//  搜索关键词 
const  keyword = ref('')
//当前页
const currentPage = ref(1)
//每页显示多少条数据
const pageSize = ref(10)
//总条数
const total = ref(10)
// 试卷列表
const  papersList = ref([])
// 获取试卷列表
const  getPaperData = async () => { 
  await getPaperList().then(res => { 
    // 输出响应结果
    console.log(res)
    // 试卷列表
    papersList.value = res.data.data
    // 更新总数
    total.value = res.data.total
  })
}

onMounted(() => { 
  getPaperData()

})

// 计算当前显示的题目和文件夹
const filteredItems = computed(() => {
  if (!currentFolder.value) {
    // 根目录显示所有没有父级的项目
    return papersList.value.filter(item => !item.parentId);
  }
  // 显示当前文件夹下的项目
  return papersList.value.filter(item => item.parentId === currentFolder.value.id);
});
//是否显示操作的选项
const isShowOption = ref();
// 当前文件夹
const  currentFolder = ref(null)
const  editingFolder = ref(null)
// 是否是重名
const isRename  = ref(false)

watch(currentFolder, () => {
  currentPage.value = 1;
});
// 点击新建文件夹的按钮
/**
 * 处理创建文件夹的点击事件
 */
const   handleCreateDir = () => {
  console.log("新建文件夹的按钮被点击");
  // 如果有正在编辑的文件夹，先取消
          if (editingFolder.value) {
            cancelFolder(editingFolder.value);
          }
          // 调用后端接口创建文件夹，此处仅为示例代码
          const newFolder = {
            id: 'temp-' + Date.now(),
            title: '',
            type: 'folder',
            isPublic:true,
            parentId: currentFolder.value ? currentFolder.value.id : null,
            createTime: new Date().toISOString().split('T')[0],
            subCount:0,
            isEditing: true,
          };
          console.log(newFolder,'newFolder');
          papersList.value.unshift(newFolder);
          editingFolder.value = newFolder;
};
 // 确认创建文件夹
 const confirmFolder = (folder,event) => {
  event.stopPropagation()
   if (!folder.title.trim()) {
      ElMessage.warning('请输入文件夹名称');
     return;
   }
   // 生成实际ID
   folder.id = 'folder-' + Date.now();
   folder.isEditing = false;
   editingFolder.value = null;
   ElMessage.success('文件夹创建成功');
 };
 // 重命名文件夹
 const handleReName =(row,event)=>{
  console.log("重命名被点击",row,event)
  event.stopPropagation()
  row.isEditing = true;
  isRename.value = true
  // todo调用后端接口  重命名文件夹

}
        
 // 取消创建文件夹
 const cancelFolder = (folder,event) => {
 event.stopPropagation()
 console.log('取消创建文件夹/或者取消重命名', folder,isRename.value)
 if(isRename.value) {
   folder.isEditing = false
   isRename.value = false
 }else{
   // 删除新建的文件夹 
    const index = papersList.value.findIndex(item => item.id === folder.id);
    if (index !== -1) {
      papersList.value.splice(index, 1);
    }
    editingFolder.value = null;
  };
}

// 鼠标移入行
const handleCellMouseEnter = (row, col, cell, event) => {
  isShowOption.value = row.id;
};

// 处理行点击
 const handleRowClick = (row) => {
   if (row.isEditing) return; // 忽略正在编辑的行
   if (row.type === 'folder') {//如何是web-folder，则设置当前文件夹为当前行
     currentFolder.value = row;
   }else {// 如果是试卷，则跳转到详情页面
    console.log('点击了试卷==> 跳转到试卷详情页');
    tabsStore.addTab({
      name: 'PaperDetail',
      title: '试卷详情',

    });
     router.push({ name: 'PaperDetail', query: { id: row.id } });
    //  router.push({path: `/paperOption/paperDetail/${row.id}` });
   }
   
 };
 // 返回上一级
 const goBack = () => {
   if (!currentFolder.value) return;
   // 查找父文件夹
   const parentFolder = papersList.value.find(
     item => item.id === currentFolder.value.parentId && item.type === 'folder'
   );
   
   currentFolder.value = parentFolder || null;
 };


 // 点击了封存的按钮 
const  isArchiveDialogVisible=ref(false)
const  archiveFormRef = ref(null)
const  archiveForm=reactive({
  archivePwd:'',
  checkPwd:''
})
const  rules = reactive({
  archivePwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 12, message: "密码长度在 6 到 12 个字符", trigger: "blur" },
  ],
  checkPwd: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    { min: 6, max: 12, message: "密码长度", trigger: "blur" }
  ]

});

 const  handleArchive = (row) => {
  console.log(row, "封存按钮被点击");
  isArchiveDialogVisible.value=true
};
//确定封存的操作 
const confirmArchive = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid,fields)=>{
    if(valid){
    //todo 调用后端接口进行封存操作

    isArchiveDialogVisible.value=false
      ElMessage({
        message: '封存成功',
        type: 'success',
      })
    }else{
      console.log(fields);
    }
  });
}
//点击发布 
const  publishSettings = (row) => {
    tabsStore.addTab({
      name: 'UpdateSettings',
      title: '考试发布',
    });
    router.push({name:'UpdateSettings',params:{paperId:row.id,source:'publish'}})
}

 //下拉菜单的选项
const moreOptions = reactive([
  { label: "移动到", command: "move"},
  { label: "编辑", command: "edit" },
  { label: "复制", command: "copy" },
  { label: "删除", command: "delete" },
  { label: "重命名", command: "rename" },
  { label: "锁定题目", command: "lock" },
]);
// 模态框是否显示
const  moveDialogVisible=ref(false) //移动到
const  deleteDialogVisible=ref(false)//删除
const  deleteFileOrQue=ref(null)//复制
const  selectedRow=ref(null)//选中的行
const  lockDialogVisible=ref(false)//锁定题目


// 点击更多选项
const  handleMoreOption=(value,row,index,event)=>{ 
  console.log(value,"更多选项被点击",index)
  selectedRow.value=row
  event.stopPropagation()
  if(value=='move'){//移动到
    moveDialogVisible.value = true
  }else if(value=='copy'){//复制
    ElMessageBox.confirm('确定要复制该试卷吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      // 复制当前试卷
      const newPaper = { ...row }; // 复制当前试卷对象
      newPaper.id = null;
      newPaper.title = row.title + '-副本';
      console.log(newPaper, '复制的试卷');
      // todo 调用后端接口复制试卷
      papersList.value.push(newPaper);
      ElMessage.success('复制成功');
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消复制',
      });
    });

  }else if(value=='delete'){//删除
    deleteDialogVisible.value = true
    deleteFileOrQue.value = row
    // 删除试卷
    ElMessageBox.confirm('确定要删除该试卷吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      // 删除当前试卷
      const index = papersList.value.findIndex(item => item.id === row.id);
      if (index !== -1) {
        papersList.value.splice(index, 1);
      }
      deleteDialogVisible.value = false;
      ElMessage.success('删除成功');
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
  
  }else if(value=='edit'){//编辑
   //跳转到新建试卷的页面  传递试卷的id 
   console.log(row,'编辑试卷');
   tabsStore.addTab({
      name: 'CreatePaper',
      title: '编辑试卷',
    });
    editPaperStore.paperId = row.id;
    router.push({name:'CreatePaper',params:{id:row.id}})
  }else if(value=='rename'){//重命名
    row.isEditing = true;
    //todo 调用后端接口 修改试卷名称 
  }else if(value=='lock'){
    lockDialogVisible.value = true
  }
}

// 新建考试 
const  toCreateExam  = ()=>{
  tabsStore.addTab({
      name: 'CreatePaper',
      title: '新建试卷',
    });
    editPaperStore.paperId = null;
    router.push({name:'CreatePaper'})
}

// 文件夹不可选 只有试卷是可以选择的
const selectable = (row) => row.type === 'paper';

//删除操作
const handleDelete = (row) => {
  console.log(row, '删除文件或题目');
  ElMessageBox.confirm('确定要删除该文件夹吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
     // 删除文件或题目  todo 调用后端接口删除文件或题目
    const index = papersList.value.findIndex(item => item.id === row.id);
    if (index !== -1) {
      papersList.value.splice(index, 1);
    }
    ElMessage.success('删除成功');
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    });
  });


 
};

//导出的操作
const  exportWordDialogVisible = ref(false);
const  exportTemplate=(type) => {
    // console.table(type); 
    if(type=='word'){
      console.log('导出word标准格式');
      exportWordDialogVisible.value = true;
    }else if(type=='excel'){
      console.log('excel标准格式');
      ElMessage.success('已选择excel排版格式');
    }else if(type=='wordTypography'){
      console.log('排版格式word');
        tabsStore.addTab({
            name: 'PaperExportSetting',
            title: '导出设置',
        });
        router.push({ name: 'PaperExportSetting', query: { source: 'paperStore' } });

      
    }
};


const  exportOptions = ref(['answer','analysis'])

const  exportWordPaper= () => { 
    //确定导出标准word格式的试卷 
    console.log('确定导出标准word格式的试卷');
    //todo 调用后端接口导出word格式的试卷
};

//安全设置的弹出框
const  securityDialogVisible=ref(false)
const  handleSecuritySetting=()=>{
  securityDialogVisible.value=true
  console.log("安全设置被点击");
}
//是否加密考试题库
const  isEncrypt=ref(false)


//移动到的相关操作 

/******************移动到dialog的操作**************************** */
const treeRef = ref();
const selectedNode = ref();
// 目录结构数据
const treeData = ref([
  {
    id: 1,
    label: '根目录',
    children: [
      {
        id: 2,
        label: '2025试卷'
      },
      {
        id: 3,
        label: 'java基础',
        children: [
          {
            id: 4,
            label: '基础1'
          }
        ]
      }
    ]
  }
])
const defaultProps = {
  children: 'children',
  label: 'label'
};
// 当前选中的文件夹
const handleNodeClick = (data) => {
  selectedNode.value = data.id;
};
// 添加文件夹的操作 
const  addNodeFolder =async () => {
  console.log("添加文件夹的操作",selectedNode.value)
  try {
      const newNode = {
        id: Date.now(),
        label: '',
        isEditing: true,
        editingName: ''
      };
      if (selectedNode.value) {
        const node = treeRef.value.getNode(selectedNode.value);
        node.expanded=true;
        // 如果没有子节点，则创建一个空数组作为其子节点的容器
        if (!node.data.children) {
          node.data.children = [];
        }
        // 将新节点添加到当前节点的子节点数组中
        node.data.children.push(newNode); 
      } else {//根目录下创建文件夹
        treeData.value[0].children?.push(newNode);
      }
     
  } catch {
    // 用户取消输入
  }
};
//  确定创建节点目录
const  createNodeFolder =(data)=>{
  console.log(data,"确定创建节点目录")
  if(data.editingName){
    data.isEditing = false;
    //  找到正在编辑的节点
    const editingNode  = treeRef.value.getNode(data.id);
    editingNode.data.label = data.editingName;
    // 更新正在编辑的节点的label属性，并更新节点视图
    
    // 调用后端接口创建文件夹
  }else{
    data.isEditing = false;
  }
}

// 取消创建节点目录
const  cancelNodeFolder =(data)=>{
  console.log(data,"取消创建节点目录")
  //找到正在编辑的节点
  const editingNode  = treeRef.value.getNode(data.id);
  // 移除正在编辑的节点
  editingNode.parent.removeChild(editingNode);
}

// 移动题目到文件夹的操作 
const confirmMoveDialog=()=>{
  // 被选中的节点文件夹
  const selectedFile = treeRef.value.getNode(selectedNode.value);
  console.log(selectedFile,"移动题目到文件夹的操作")
  // 调用后端接口移动题目到文件夹
}



</script >
<style lang="less" scoped>
.right-div .el-input {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
}
.right-div .el-input :deep(.el-input__wrapper) {
 // background-color: #f3f4f6;
  border: none;
  border-radius: 20px;
  box-shadow: none;
}
.el-select :deep(.el-input__wrapper) {
  background-color: #f3f4f6;
  border: none;
  box-shadow: none;
}
/** 去除点击时的黑色边框 */
.el-tooltip__trigger:focus {
  outline: none; // unset 这个也行
}

.el-table :deep(th.el-table__cell) {
  background-color: #f9fafb;
  font-weight: 600;
}
</style>